<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图导览</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        background: #ffffff;
        overflow: hidden;
    }

    #container {
        width: 100%;
        height: 100%;
        position: relative;
        bottom: -20px;
    }
    .nav_list{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        height: 54px;
        display: flex;
        align-items: center;
        background-color: rgba(245, 245, 245, 100);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1001;
    }
    .nav_item{
        width: 25%;
        position: relative;
        height: 54px;
    }
    .nav_item>div{
       width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(245, 245, 245, 100);
    }
    .nav_item>div:first-child{
        z-index: 10;
    }
    .active>div:last-child{
        z-index: 20;
    }
    .img{
        text-align: center;
    }
    img{
        width: 32px;
        height: 32px;
    }
    .name{
        text-align: center;

    }
    text{
        color: rgba(102, 102, 102, 100);
        font-size: 14px;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .red{
        color: rgba(194, 31, 48, 100);
    }
</style>

<body>
<div id="container"></div>
<!--            上方导航-->
<div class="nav_list">
    <div onclick="handleToggleAct(0)" data-key="0" data-lat="36.2151193" data-lng="117.006570" class="nav_item active">
        <div v-show="actkey!=1">
            <div class="img">
                <img src="./image/map_msms.png"></img>
            </div>
            <div class="name">
                <span>民俗美食</span>
            </div>
         </div>
        <div v-show="actkey==1" >
            <div class="img">
                <img src="./image/map_msms_.png"></img>
            </div>
            <div class="name">
                <span class="red">民俗美食</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(1)" data-key="1" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=2">
            <div class="img">
                <img src="./image/map_jd.png"></img>
            </div>
            <div class="name">
                <span>景点</span>
            </div>
        </div>
        <div v-show="actkey==2">
            <div class="img">
                <img src="./image/map_jd_.png"></img>
            </div>
            <div class="name">
                <span class="red">景点</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(2)" data-key="2" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=3">
            <div class="img">
                <img src="./image/map_ms.png"></img>
            </div>
            <div class="name">
                <span>民宿</span>
            </div>
        </div>
        <div v-show="actkey==3">
            <div class="img">
                <img src="./image/map_ms_.png"></img>
            </div>
            <div class="name">
                <span class="red">民宿</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(3)" data-key="3" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=4">
            <div class="img">
                <img src="./image/map_xsj.png"></img>
            </div>
            <div class="name">
                <span>洗手间</span>
            </div>
        </div>
        <div v-show="actkey==4">
            <div class="img">
                <img src="./image/map_xsj_.png"></img>
            </div>
            <div class="name">
                <span class="red">洗手间</span>
            </div>
        </div>
    </div>
    <div onclick="handleToggleAct(4)" data-key="4" data-lat="36.2151193" data-lng="117.006570" class="nav_item">
        <div v-show="actkey!=5">
            <div class="img">
                <img src="./image/map_tcz.png"></img>
            </div>
            <div class="name">
                <span>停车场</span>
            </div>
        </div>
        <div v-show="actkey==5">
            <div class="img">
                <img src="./image/map_tcz_.png"></img>
            </div>
            <div class="name">
                <span class="red">停车场</span>
            </div>
        </div>
    </div>
</div>
<div>

</div>
<style>
    .content{
        display: flex;
        justify-content: space-between;
        height: 70px;
        align-items: center;
        width: 200px;
        padding: 10px;
        background: #ffffff;
        border-radius: 6px;
        box-shadow: 0 0  3px  #ddd;
    }
    .content .left img{
        height: 50px;
        width: 50px;
    }
    .content .right .name{
        font-size: 16px;
        color: #C21F30;
        font-weight: bold;
    }
    .content .right .desc{
        padding-left: 10px;
        margin-top: 8px;
        font-size: 14px;
    }
    .img_b{
        text-align: center;
    }
    .img_b img{
        width: 30px;
        height: 20px;
        position: relative;
        top: -3px;
    }
</style>
<script type="text/javascript">
var nav_item_els = document.getElementsByClassName('nav_item')
function handleToggleAct(key) {
    if(nav_item_els[key].className == 'nav_item active'){
        return false
    }
    nav_item_els[key].className = 'nav_item active'
    for(var i=0;i<nav_item_els.length;i++){
        if(nav_item_els[i].dataset.key!=key){
            nav_item_els[i].className = 'nav_item'
        }
    }
    var lat = nav_item_els[key].dataset.lat
    var lng = nav_item_els[key].dataset.lng
    var infoWindowLocation = new TMap.LatLng(lat,lng);//创建一个坐标
    map.panTo(infoWindowLocation)
    create_W(lat,lng)
}

    // 36.215383, 117.006570
    var center = new TMap.LatLng(36.2151193, 117.006570);
    var imageSW = new TMap.LatLng(36.213983, 117.005670);
    var imageNE = new TMap.LatLng(36.215483, 117.008070);

    var scaleSW = new TMap.LatLng(36.212183, 117.005070);
    var scaleNE = new TMap.LatLng(36.216983, 117.010070);
    let boundary = new TMap.LatLngBounds(scaleSW, scaleNE);
    //初始化地图
    var map = new TMap.Map("container", {
        zoom: 25, //设置地图缩放级别
        center: center, //设置地图中心点坐标
        viewMode:'2D',
        showControl:false,
        baseMap: {
            type: "vector",
            features: ["base"], // 隐藏矢量文字
        },
        boundary:boundary
    });

    var imageSW = new TMap.LatLng(36.213983, 117.005670);
    var imageNE = new TMap.LatLng(36.215483, 117.008070);
    var imageLatLngBounds = new TMap.LatLngBounds(imageSW, imageNE);
    var imageGroundLayer = new TMap.ImageGroundLayer({
        bounds: imageLatLngBounds,
        src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/bg.jpg',
        map: map
    });

    var geometriesArr = []
    var geometriesClusterArr = []
    for(var i=0;i<20;i++){
        var lat = (36.21503*1000000 -  Math.random()*1000)/1000000
        var lng = (117.007100*1000000 - Math.random()*1000)/1000000
        geometriesArr.push({
            "id": 'mk0'+i,
            "styleId": 'marker',
            "position": new TMap.LatLng(lat, lng),
            "properties": {
                "title": i
            }
        })
        geometriesClusterArr.push({position:new TMap.LatLng(lat, lng)})
    }
    // console.log(geometriesArr,'geometriesArr')
    //点聚合
    var markerCluster = new TMap.MarkerCluster({
        id: 'cluster', //图层id
        map: map,       //设置点聚合显示在哪个map对象中（创建map的段落省略）
        enableDefaultStyle: false,   //使用默认样式
        minimumClusterSize: 2,  //最小聚合点数：2个
        geometries: geometriesClusterArr,
        zoomOnClick: true,  //点击聚合数字放大展开
        gridSize: 60,       //聚合算法的可聚合距离，即距离小于该值的点会聚合至一起，默认为60，以像素为单位
        averageCenter: false, //每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 28//采用聚合策略的最大缩放级别，若地图缩放级别大于该值，则不进行聚合，标点将全部被展开
    });


function myInfoWindow(options) {
    var mydom;
    TMap.DOMOverlay.call(this, options);
}
myInfoWindow.prototype = new TMap.DOMOverlay();

// 初始化
myInfoWindow.prototype.onInit = function(options) {
    this.position = options.position;
    this.content = options.content;
};
// 创建DOM元素，返回一个DOMElement
myInfoWindow.prototype.createDOM = function() {
    mydom=document.createElement("div");
    //设置DOM样式
    mydom.style.cssText = 'position:absolute;top:0px;left:0px;';
    mydom.innerHTML=this.content;
    let that = this
    mydom.addEventListener('touchend',function () {
        create_W(that.position.lat,that.position.lng)
    })
    return mydom;
};
// 更新DOM元素，在地图移动/缩放后执行
myInfoWindow.prototype.updateDOM = function() {
    if (!this.map) {
        return;
    }
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position);
    //默认使用DOM左上角作为坐标焦点进行绘制（左上对齐）
    //如想以DOM中心点（横向&垂直居中）或其它位置为焦点，可结合this.dom.clientWidth和this.dom.clientHeight自行计算
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'; //本例水平居中
    let top = pixel.getY() - this.dom.clientHeight + 'px';
    //将平面坐标转为三维空间坐标
    this.dom.style.transform = `translate3d(${left}, ${top}, 0px)`;
};

//自定义一个更新内容的方法
myInfoWindow.prototype.updateContent = function(content) {
    mydom.innerHTML=content;
};

var iDs = []
var ClusterArr = markerCluster.getGeometries()
// for(var i=1;i<ClusterArr.length;i++){
//     iDs.push(ClusterArr[i].id)
//     // new myInfoWindow({
//     //     map:map,
//     //     position: new TMap.LatLng(ClusterArr[i].position.lat, ClusterArr[i].position.lng),
//     //     content:"<img src='./image/map_jd_.png'>"
//     // })
// }
// markerCluster.remove(iDs)
var ClusterArr = markerCluster.getGeometries()
for(var i=0;i<ClusterArr.length;i++){
    iDs.push(ClusterArr[i].id)
    new myInfoWindow({
        map:map,
        position: new TMap.LatLng(ClusterArr[i].position.lat, ClusterArr[i].position.lng),
        content:"<img src='./image/map_jd_.png'>"
    })
}
// iDs
// for(var i=0;i<ClusterArr.length-1;i++){
//     new myInfoWindow({
//         map:map,
//         position: new TMap.LatLng(geometriesClusterArr[i].position.lat, geometriesClusterArr[i].position.lng),
//         content:"<img src='./image/map_jd_.png'>"
//     })
// }

// markerCluster.on('cluster_changed',function (e) {
//     let markerClusterArr = markerCluster.getClusters()
//     for(var i=0;i<markerClusterArr.length;i++){
//         new myInfoWindow({
//             map:map,
//             position: new TMap.LatLng(markerClusterArr[i].center.lat, markerClusterArr[i].center.lng),
//             content:"<img src='./image/map_tcz.png'>"
//         })
//     }
// })

//创建一个自定义的infoWindow
// var myIW = new myInfoWindow({
//     map:map,
//     position: center,
//     content:"<img src='./image/map_jd_.png'>"
// })

// setTimeout(function(){myIW.updateContent("你好再见~")},2000);


var infowindow=new TMap.InfoWindow({
    content:'<div></div>', //信息窗口内容
    position:center,//显示信息窗口的坐标
    map:map,
    enableCustom:true,
    offset:{x:0,y:-5}
});
infowindow.close()
function close_w(){
    infowindow.close()
}
function target_scen(id){
    console.log(id)
}
markerCluster.on('click',function (e) {
    var lat = e.cluster.center.lat
    var lng = e.cluster.center.lng
    create_W(lat,lng)
})
function create_W(lat,lng){
    let contenthtml=`<div>
            <div align="right"><div id="close" style="font-size:18px;">×</div></div>
            <div class="content" id="content">
        <div class="left">
            <img src="./image/map_jd_.png"/>
        </div>
        <div class="right">
            <div class="name"><span>民宿文化美食街</span></div>
            <div class="desc"><span>八大特色业态：传承印记、宴遇四海、...</span></div>
        </div>
    </div>
    <div class="img_b">
            <img src="./image/MPIS-CaretBottom.png" />
        </div>
            </div>`
    var infoWindowLocation = new TMap.LatLng(lat,lng);//创建一个坐标
    infowindow.setPosition(infoWindowLocation)
    infowindow.setContent(contenthtml)
    infowindow.open()
    document.getElementById('close').addEventListener('touchend', close_w)
    document.getElementById('content').addEventListener('touchend', function(){target_scen(1)})
}

    // //初始化marker
    // var marker = new TMap.MultiMarker({
    //     id: 'marker-layer',
    //     map: map,
    //     styles: {
    //         "marker": new TMap.MarkerStyle({
    //             "width": 25,
    //             "height": 35,
    //             // "anchor": { x: 16, y: 32 },
    //             "src": './image/map_jd_.png',
    //         })
    //     },
    //     geometries: geometriesArr
    // });
    //
    // marker.on("click", function (e) {
    //     let contenthtml=`<div>
    //         <div align="right"><div id="close" style="font-size:18px;">×</div></div>
    //         <div class="content" id="content">
    //     <div class="left">
    //         <img src="./image/map_jd_.png"/>
    //     </div>
    //     <div class="right">
    //         <div class="name"><span>民宿文化美食街</span></div>
    //         <div class="desc"><span>八大特色业态：传承印记、宴遇四海、...</span></div>
    //     </div>
    // </div>
    // <div class="img_b">
    //         <img src="./image/MPIS-CaretBottom.png" />
    //     </div>
    //         </div>`
    //     var lat = e.geometry.position.lat
    //     var lng = e.geometry.position.lng
    //     var infoWindowLocation = new TMap.LatLng(lat,lng);//创建一个坐标
    //     map.panTo(infoWindowLocation)
    //     infowindow.setPosition(infoWindowLocation)
    //     infowindow.setContent(contenthtml)
    //     infowindow.open()
    //     document.getElementById('close').addEventListener('touchend', close_w)
    //     document.getElementById('content').addEventListener('touchend', function(){target_scen(1)})
    //
    // })
</script>
</body>
</html>